import React, { Component } from "react";
// import ReactDOM from 'react-dom';
import axios from "axios";
import 'antd/dist/antd.css';
// import './index.css';
import { Button, Table, Card ,Popconfirm, Switch} from 'antd';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// const columns = [
//   {
//   title: '日期',
//   dataIndex: 'date',
//   render: text => <p>{text}</p>,
// }, {
//   title: '参考编号',
//   dataIndex: 'number',
// },{
//   title: '顾客',
//   dataIndex: 'customer',
// }, {
//   title: '累计',
//   dataIndex: 'Cumulative',
// } , {
//   title:"操作",
//   render:(txt,record,index)=>{
//       return <div>
//           <Button style={{margin:"0 20px"}}type="primary" size="small" >修改</Button>
//           <Popconfirm title="是否删除" onCancel={()=>console.log("取消删除")}  onConfirm={()=>this.delete(record.id,index)} okText="Yes" cancelText="No">
//           <Button type="danger"size="small">删除</Button>
//           </Popconfirm>
//       </div>
//   },
// }
// ];

const data = [
//   {
//   key: '1',
//   date: '2021年1月1日',
//   number:'	2001年',
//   customer:'皮特·萨里亚（Pete Sariya）',
//   Cumulative:'20.5',
  
// }, {
//   key: '2',
//   date: '2021年1月8日',
//   number: 	'2002年',
//   customer:'蒙蒂·卡洛（Monty Carlo）',
//   Cumulative:'25.5',
// }, {
//   key: '3',
//   date: '2021年1月15日',
//   number: '2003年',
//   customer:'艾拉·姆布里特',
//   Cumulative:'20.5',
// }, {
//   key: '4',
//   date: '2021年1月20日',
//   number: '2004年',
//   customer:'格雷塔生活',
//   Cumulative:'	23.0',
// }, {
//   key: '5',
//   date: '2021年1月20日',
//   number: '2004年',
//   customer:'倒钩阿奎',
//   Cumulative:'30.0',
// }, {
//   key: '6',
//   date: '2021年1月20日',
//   number: '2004年',
//   customer:'鲍勃·弗拉普莱斯',
//   Cumulative:'18.5',
// }, {
//   key: '7',
//   date: '2021年1月20日',
//   number: '2004年',
//   customer:'佩奇·特纳（Paige Turner）',
//   Cumulative:'16.5',
// }, {
//   key: '8',
//   date: '2021年1月20日',
//   number: '2004年',
//   customer:'安娜·马尔（Anna Mull）',
//   Cumulative:'20.5',
// }, {
//   key: '9',
//   date: '2021年1月20日',
//   number: '2004年',
//   customer:'艾拉·姆布里特',
//   Cumulative:'18.5',
// }
];
    

      
// export default class App extends React.Component {
//   state = {
//     selectedRowKeys: [],
//   };
//   selectRow = (record) => {
//     const selectedRowKeys = [...this.state.selectedRowKeys];
//     if (selectedRowKeys.indexOf(record.key) >= 0) {
//       selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
//     } else {
//       selectedRowKeys.push(record.key);
//     }
//     this.setState({ selectedRowKeys });
//   }
//   onSelectedRowKeysChange = (selectedRowKeys) => {
//     this.setState({ selectedRowKeys });
//   }
//   delete(id,index){     
//     axios({
//       url:"",
//       params:{id}
//     })
//     .then(res=>{
//       let obj = JSON.parse(res.data);
//       if(obj.status=="success"){
//           let arr = this.state.data;
//           arr.splice(index,1);
//           this.setState({
//             data:[...arr]
//           })
//       }else{
  
//       }
//     });
//   }

//   componentDidUpdate(){
//     console.log("componentDidUpdate");
//   }

//   componentDidMount(){
//     axios({
//       url:"http://localhost/2011/getUser.php"
//     }).then(res=>{
//       let arr = JSON.parse(res.data);
//       // console.log(arr);
//       // console.log(res.data);
//       arr.forEach((item,index) => {
//           item.key=index+1
//       });
//       this.setState({
//         data:arr
//       })        
//     })
//   }
//   render() {
//     const { selectedRowKeys } = this.state;
//     const rowSelection = {
//       selectedRowKeys,
//       onChange: this.onSelectedRowKeysChange,
//     };
//     return (
//       <Table
//         rowSelection={rowSelection}
//         columns={columns}
//         dataSource={data}
//         onRow={(record) => ({
//           onClick: () => {
//             this.selectRow(record);
//           },
//         })}
//       />
//     );
//   }
// }
    

export default class table extends Component {
  constructor(props){
    super(props)
  }
  state={
    columns:[      
      {
        title: '日期',
        dataIndex: 'data',
        render: text => <p>{text}</p>,
      }, {
        title: '参考编号',
        dataIndex: 'number',
      },{
        title: '顾客',
        dataIndex: 'name',
      }, {
        title: '累计',
        dataIndex: 'cumulative',
      } , {
        title:"操作",
        render:(txt,record,index,props)=>{
            return <div ><Router > 
                <Link to='#/admin/return/Newreturns'><Button style={{margin:"0 20px"}}type="primary" size="small"  onConfirm={()=>this.delete(record.id,index)} okText="Yes" cancelText="No" >修改</Button></Link>
                <Popconfirm  title="是否删除" onCancel={()=>console.log("取消删除")}  onConfirm={()=>this.delete(record.id,index)} okText="Yes" cancelText="No" >
                <Button type="danger"size="small" 
>删除</Button>
                </Popconfirm>
            
              
                <Route path="/Newreturns" component="Newreturns"/>
               
            
               </Router>
            </div>
        },
      }
    ],
    data:[

    ],
  }
  delete(id,index){
      
    axios({
      url:"http://10.35.166.70:8080/delreturn",
      params:{id},
  
    })
    .then(res=>{
      if(res.data=="success"){
          let arr = this.state.data;  
          arr.splice(index,1);
          this.setState({
            data:[...arr]
            
          })
      }else{

      }
    });
  }

  componentDidMount(){
    axios({
      url:"http://10.35.166.70:8080/return"
    }).then(res=>{
      let arr = res.data;
      arr.forEach((item,index) => {
          item.key=index+1
        
      });
      this.setState({
        data:arr
      })        
    })
  }
  render() {
    return (
      <div>
        <Table
         columns={this.state.columns}
         dataSource={this.state.data}
         />
      </div>
    )
  }
}         
